<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务一：零基础HTML编码</title>
</head>
<body>
	<h1>网站一级标题</h1>
	<ul>
		<li><a href="#">导航链接1</a></li>
		<li><a href="#">导航链接2</a></li>
		<li><a href="#">导航链接3</a></li>
		<li><a href="#">导航链接4</a></li>
	</ul>
	<div>
		<h2>文章一级标题</h2>
		<h3>文章二级标题</h3>
		<span>文章作者 </span> <span> 发表时间</span>
		<p>段落文章内容段落文章内容段落文章内。<br>手动换行<br>容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容</p>
		<p>段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容文章内容段落文章内容段落文章内容段落文章内容</p>
		<img src="img.gif" alt="">
		<p>段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容文章内容段落文章内容段落文章内容段落文章内容</p>
	</div>

	<div>
		<h2>第二篇文章一级标题</h2>
		<h3>文章二级标题</h3>
		<span>文章作者 </span> <span> 发表时间</span>
		<p>段落文章内容段落文章内容段落文章内。<br>手动换行<br>容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容</p>
		<p>段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容文章内容段落文章内容段落文章内容段落文章内容</p>
		<img src="img.gif" alt="">
		<p>段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章内容段落文章段落文内容段落文章内容文章内容段落文章内容段落文章内容段落文章内容</p>
		<ul>
			<li>一个列表</li><li>一个列表</li><li>一个列表</li><li>一个列表</li>
		</ul>
	</div>
<div>
	<h4>图片</h4>
	<div><p>1234图片图片</p>
	<img src="img.gif" alt=""></div>
	<div><p>1234图片图片</p>
	<img src="img.gif" alt=""></div>
	<div><p>1234图片图片</p>
	<img src="img.gif" alt=""></div>
	<div><p>1234图片图片</p>
	<img src="img.gif" alt=""></div>
	<div><p>1234图片图片</p>
	<img src="img.gif" alt=""></div>
</div>
<div>
	<h2>最后一篇文章 一级标题</h2>
	<h3>二级标题</h3>
		<span>文章作者 </span> <span> 发表时间</span>
		<ol>
			<li>排名1</li>
			<li>排名2</li>
			<li>排名3</li>
		</ol>
		<span>下面是一个表格</span>
		<table border="1">
			<caption>下面是一个表格</caption>
			<tr>
				<th>表头</th>
				<th>表头</th>
				<th>表头</th>
			</tr>
			<tr>
				<td>单元格内容</td>
				<td>单元格内容</td>
				<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>单元格内容</td>
				<td>单元格内容</td>
				<td><a href="#">操作</a></td>
			</tr>
			<tr>
				<td>单元格内容</td>
				<td>单元格内容</td>
				<td><a href="#">操作</a></td>
			</tr>

			<tr>
				<td>总计</td>
				<td colspan="2">10000</td>
			</tr>
		</table>
</div>
<div>
	<h2>这里以后是一个侧栏</h2>
	<h3>侧栏注册标题</h3>
	<form action="">
		<label for="email">邮箱</label>
		<input type="email" id="email" value="" placeholder="请输入邮箱">
		<p>请按邮箱格式输入</p>
		<label for="password">密码</label>
		<input type="password" id="password" placeholder="请输入密码">
		<label for="password2">重复密码</label>
		<input type="password" id="password2" placeholder="请重复输入密码">
		<p>密码为6-16位英文数字</p>

		<label>性别</label>
		<input type="radio" value="女" checked>女
		<input type="radio" value="男">男

		<label for="city">城市</label>
		<select name="city">
			<option value="北京">北京</option>
			<option value="上海">上海</option>
		</select>

		<label>爱好</label>
		<input type="checkbox" value="运动">运动
		<input type="checkbox" value="音乐">音乐
		<input type="checkbox" value="科学">科学

		<label for="">个人描述</label>
		<textarea name="message" rows="3" cols="20">输入你的个人描述</textarea>
		<input type="submit" value="确认提交">
	</form>
</div>
<div class="foot">
	版权所有&copy;
</div>
</body>
</html>